/**
 * 表格的columns 封装
 * @Author: linzy
 * @Date: 2022-05-09
 * @function useColumns
 * @param {object[]} columns - 表格项数组
 * @param {object} tableForm={} - 表格数据对象
 * @returns {object[]} newColumns - 新的columns数组
 * @property {string} type -
 *  index： 下标 结合后台返回的limit、page生成 <br />
 *  money 金额显示，做了/100处理，同时会每三位隔断 <br />
 *  date 日期 <br />
 *  dateMinute 日期 精确到分钟 <br />
 *  datetime 日期 精确到秒 <br />
 *  preview 预览 <br />
 *  pics 多张预览 <br />
 *  copy 复制 <br />
 *  status 状态 需要传入enum 枚举如{1:'下线',2:'上线'} <br />
 *  weight 状态 传入 onChange(params) params = {id,weight} <br />
 *  star 评星 传入 onChange(params) params = {id,star} <br />
 *  tag 标签显示 支持数组，字符串需要传入separator 默认为‘ ’空格 <br />
 *  range 日期范围 需要传入dataIndex的格式为 'startTime,endTime' <br />
 *  djType 跳转类型 需要传入djTypeList <br />
 * @property {string} render - 传入render则表示 自行实现 用于拓展
 * @property {boolean | function} show - 是否显示该项
 * @property {string} tdWidth - 限制表格的宽度即表格字数
 * @example
 * const columns = useColumns([
 *   {dataIndex: 'id',type: 'copy',label:'ID',tdWidth: 4},
 *   {dataIndex: 'cover',type: 'preview',label:'图片'},
 * ])
 */
import useRenders from "./useRenders";
import useIcons from "./useIcons";
import { getTdWidth } from "@/hooks/tools";
import { setDefaultAttrs, setAlias, getBoolean } from "@/hooks/tools";
import styles from "./style.less";

export default (columns, tableForm = {}) => {
  const renders = useRenders();
  const newColumns = columns
    .filter(item => getBoolean(item.show))
    .map(item => {
      const { type, tdWidth, buttons, icons, ...rest } = item;
      setAlias(rest, { dataIndex: "name", title: "label" });
      // 设置表格默认宽度
      tdWidth && (rest.width = rest.width ?? getTdWidth(tdWidth));
      setDefaultAttrs(rest, { className: styles.tdClass });
      if (rest.title === "操作") {
        setDefaultAttrs(rest, {
          fixed: "right",
          width: "fit-content"
        });
        // rest.className += ' ' + styles.operateClass;
      }
      if (rest.render) return rest;
      switch (type) {
        case "date":
        case "dateMinute":
        case "copy":
        case "percent":
        case "ellipsis":
        case "decode":
        case "mpType":
        case "shortUrl":
        case "shortMpUrl":
          rest.render = renders[type];
          break;
        case "index":
          rest.render = renders[type](tableForm);
          break;
        case "pics":
        case "images":
          rest.render = renders["pics"](rest);
          break;
        case "preview":
        case "pic":
        case "image":
          rest.render = renders["preview"](item);
          break;
        case "datetime":
        case "dateTime":
          rest.render = renders["datetime"];
          break;
        case "weight":
        case "mpUrl":
        case "money":
        case "video":
          rest.render = renders[type](rest);
          break;
        case "star":
          rest.render = renders[type](rest.onChange, rest.key);
          break;
        case "status":
          rest.render = renders[type](rest);
          break;
        case "tag":
          rest.render = renders[type](rest);
          rest.className = styles.tagColumn;
          break;
        case "range":
          rest.render = renders[type](rest.dataIndex, rest.mode);
          break;
        case "djType":
          rest.render = renders[type](rest.djTypeList);
          break;
        case "link":
          rest.render = renders[type](rest.onClick);
          break;
        default:
          // 处理操作
          if (type === "operate" || rest.title === "操作") {
            const iconList = buttons || icons || [];
            function IconsRender(text, record, index) {
              return useIcons({ icons: iconList, record, index });
            }
            rest.render = IconsRender;
            // 处理 操作悬浮在右侧同时设置width
            setDefaultAttrs(rest, {
              fixed: "right",
              width: "fit-content"
            });
          }
          break;
      }
      return rest;
    });
  return newColumns;
};
